<script setup lang="ts">
  import { ref, watch, onMounted } from 'vue';
  import { getAllpolicy } from '@/api/policy';
  import { useRouter } from 'vue-router';
  import { Modal } from '@arco-design/web-vue';
  import { toDetail } from '@/utils/utils';

  // 接收父组件传递的筛选参数
  const props = defineProps<{
    params?: Record<string, any>;
  }>();

  const router = useRouter();

  // 标签颜色列表
  const tagColors = [
    'arcoblue',
    'magenta',
    'purple',
    'pinkpurple',
    'lime',
    'green',
    'cyan',
    'blue',
  ];

  // 分页状态
  const pagination = ref({
    current: 1,
    pageSize: 20,
    total: 0,
    showTotal: (total: number) => `共 ${total} 条记录`,
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: ['10', '20', '30', '50'],
  });

  // 数据列表
  const policyList = ref([]);
  const loading = ref(false);

  // 滚动到页面顶部
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

  // 获取随机标签颜色
  const getRandomTagColor = (index: number) => {
    return tagColors[index % tagColors.length];
  };

  // 检查标题是否包含"公告"

  // 跳转到详情页
  const goToDetail = (id: string) => {
    router.push({
      path: '/ai/policy/policydateDetail',
      query: { id },
    });
  };

  // 获取政策列表
  const fetchPolicyList = () => {
    loading.value = true;
    const requestParams = {
      page_size: pagination.value.pageSize,
      page_no: pagination.value.current,
      ...(props.params || {}),
    };

    getAllpolicy(requestParams)
      .then((res) => {
        policyList.value = res.data.list || [];
        pagination.value.total = res.data.total || 0;
        window.scrollTo({ top: 0, behavior: 'smooth' });
      })
      .catch((error) => {
        console.error('获取政策列表失败:', error);
      })
      .finally(() => {
        loading.value = false;
      });
  };

  // 监听筛选参数变化
  watch(
    () => props.params,
    (newParams) => {
      console.log('筛选参数变化:', newParams);
      pagination.value.current = 1;
      fetchPolicyList();
      scrollToTop();
    },
    { deep: true, immediate: false }
  );

  // 处理分页变化
  const handlePageChange = (current: number) => {
    console.log('页码变化:', current);
    pagination.value.current = current;
    fetchPolicyList();
    scrollToTop();
  };

  const handlePageSizeChange = (pageSize: number) => {
    console.log('每页条数变化:', pageSize);
    pagination.value.pageSize = pageSize;
    pagination.value.current = 1;
    fetchPolicyList();
    scrollToTop();
  };

  // 初始化加载数据
  onMounted(() => {
    fetchPolicyList();
  });
</script>

<template>
  <div class="box">
    <a-card :title="title" :bordered="false" style="width: 100%">
      <a-list
        style="width: 100%; margin-top: -10px"
        :bordered="false"
        :loading="loading"
      >
        <a-list-item v-for="item in policyList" :key="item.id">
          <a-row class="listItem">
            <a-col :span="22" class="item">
              <div class="title" @click="toDetail(item)">
                {{ item.policy_title }}
              </div>
              <div class="pubs">
                <div>发布单位：{{ item.policy_dept || '未知' }}</div>
                <div>发布时间：{{ item.release_time || '未知' }}</div>
              </div>
              <div class="flexrow">
                <a-tag
                  v-for="(tag, index) in item.policy_tags"
                  :key="index"
                  :color="getRandomTagColor(index)"
                  style="margin-right: 10px"
                >
                  {{ tag }}
                </a-tag>
              </div>
            </a-col>
            <!-- 只有标题包含"公告"时显示按钮 -->
            <!--            v-if="hasNoticeInTitle(item.policy_title)"-->
            <a-col :span="2" flex>
              <a-button size="small" type="primary" @click="toDetail(item)">
                我要咨询
              </a-button>
            </a-col>
          </a-row>
        </a-list-item>
      </a-list>

      <!-- 分页组件 -->
      <div class="pagination-container" v-if="pagination.total > 0">
        <a-pagination
          :current="pagination.current"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :show-total="pagination.showTotal"
          :show-quick-jumper="pagination.showQuickJumper"
          :show-size-changer="pagination.showSizeChanger"
          :page-size-options="pagination.pageSizeOptions"
          @change="handlePageChange"
          @page-size-change="handlePageSizeChange"
        />
      </div>
    </a-card>
  </div>
</template>

<style scoped lang="less">
  .box {
    width: 100%;
    padding: 30px;
    padding-top: 0px;
  }

  ::v-deep .arco-card-header-title {
    font-weight: bold;
    font-size: 20px;
  }

  .listItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2f3f5;
    &:last-child {
      border-bottom: none;
    }
  }

  .flexrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .item {
    padding: 0 !important;
    .title {
      cursor: pointer;
      font-size: 18px;
      margin-bottom: 12px;
      &:hover {
        color: #3677f6;
      }
    }
    .pubs {
      display: flex;
      margin-bottom: 12px;
      color: #666;
      font-size: 14px;
      > div {
        margin-right: 20px;
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 40px 0;
    color: #999;
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  ::v-deep .arco-tag {
    margin-bottom: 8px;
  }

  ::v-deep .list-item {
    padding: 0 !important;
  }
</style>
